import React, { useEffect, useRef, useState } from 'react';
import styles from './index.module.scss';
import { observer, inject } from "mobx-react";
import NormalCard from '../NormalCard';
import CardModel, { StageStatusCurrent, StageStatusNone, StageStatusFirstChild } from '../../models/card-stage';
import { Button } from '@alifd/next';
import { runInAction } from 'mobx';
@inject('cardModel')
@observer
export default class CardContainer extends React.Component<{
    cardModel: CardModel
    colIndex: Number
}> {
    state = {
    }
    async addCard() {
        runInAction(async () => {
            var newData = await this.props.cardModel.createNewCard('实力');
            newData.parentId = this.props.cardModel.currentCard.id;
            const cardModel = this.props.cardModel;
            cardModel.currentCard.cols[this.props.colIndex].cards.push({
                id: newData.id
            });
            console.log(await cardModel.getCardData(newData.id), this.props.colIndex);
            setTimeout(() => {
                cardModel.saveCurrentCard();
            }, 0);
        });
    }

    render() {
        const cards = this.props.cardModel.currentCard.cols[this.props.colIndex].cards;
        return (
            <div className={styles.container} style={{
                flex: 1
            }}>
                <Button size='small' onClick={this.addCard.bind(this)}>添加</Button>
                <div className={styles.cardWrap}>
                    {cards.map(cardItem => {
                        return <NormalCard
                            parentCardId={this.props.cardModel.currentCardId}
                            childLength={Object.keys(cards).length}
                            key={cardItem.id}
                            cardId={cardItem.id}
                            colIndex={this.props.colIndex} />;
                    })}
                </div>
            </div>
        );
    }
};
